<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '央国企选岗助手',
  },
}
</route>
<template>
  <view class="tabbar-index">
    <HomeIndex v-if="currentTab === 0 && showPage" />
    <MineIndex v-if="currentTab === 1" />

    <c-fab
      text="课程顾问"
      v-if="currentTab === 0 && isLogined"
      @click="classCodePopupRef.open()"
    ></c-fab>
    <classCodePopup ref="classCodePopupRef" />

    <wd-tabbar
      activeColor="#FF800E"
      inactive-color="#999"
      v-model="currentTab"
      fixed
      :safeAreaInsetBottom="true"
      @change="handleChangeTab"
    >
      <wd-tabbar-item v-for="(item, index) in list" :key="item.pagePath" :title="item.text">
        <template #icon>
          <wd-img
            height="40rpx"
            width="40rpx"
            :src="currentTab === index ? item.selectedIconPath : item.iconPath"
          ></wd-img>
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
  </view>
</template>

<script lang="ts" setup>
  import opportunity from '@/static/tabbar/opportunity.png';
  import opportunityFilled from '@/static/tabbar/opportunity-filled.png';
  import mine from '@/static/tabbar/mine.png';
  import mineFilled from '@/static/tabbar/mine-filled.png';
  import HomeIndex from '../index/index.vue';
  import MineIndex from '../mine/index.vue';
  import classCodePopup from './components/classCodePopup.vue';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';

  const { isLogined } = storeToRefs(useUserStore());
  const list = [
    {
      iconPath: opportunity,
      selectedIconPath: opportunityFilled,
      pagePath: '/pages/index/index',
      text: '机会',
    },
    {
      iconPath: mine,
      selectedIconPath: mineFilled,
      pagePath: '/pages/about/about',
      text: '我的',
    },
  ];
  const classCodePopupRef = ref();
  const currentTab = ref(0);

  const showPage = ref(false);

  const handleChangeTab = ({ value }) => {
    currentTab.value = value;
  };
  onLoad(() => {
    useUserStore().getUserInfo();
  });
  onShow(() => {
    showPage.value = true;
  });
  onHide(() => {
    showPage.value = false;
  });
  onShareAppMessage((res) => {
    return {
      title: '央国企选岗助手分享',
      desc: '央国企选岗助手分享',
      imageUrl: '/static/images/share.jpg',
      path: '/pages/tabbarIndex/index', // 分享路径
      success: (res) => {
        console.log('分享成功', res);
      },
      fail: (err) => {
        console.error('分享失败', err);
      },
    };
  });
</script>

<style lang="scss" scoped>
  .tabbar-index {
    padding-bottom: calc(var(--wot-tabbar-height) + env(safe-area-inset-bottom));
    height: 100%;
    overflow: hidden;
  }
</style>
